import React, { useState, useRef, useEffect } from "react";
import { AppstoreOutlined } from "@ant-design/icons";
import { useNavigate } from "react-router-dom";
import "./ButtonWithTooltip.css";

// 引入图片
import qudao from './渠道代理.png'
import huaban from './花瓣.png'
import kaifang from './开放平台.png'
import nainiu from './奶牛.png'
import dizhi from './定制设计.png'
import zhaomu from './招募.png'

const defaultImage = "https://img0.baidu.com/it/u=2075518181,1224688219&fm=253&fmt=auto&app=138&f=JPEG?w=617&h=449"; // 替换为你的默认图片URL

const ButtonWithTooltip: React.FC = () => {
  const [showTooltip, setShowTooltip] = useState(false);
  const tooltipRef = useRef<HTMLDivElement | null>(null);
  const buttonRef = useRef<HTMLButtonElement | null>(null);
  const navigate = useNavigate();

  const handleClick = () => {
    setShowTooltip((prev) => !prev);
  };

  const handleMouseEnter = () => {
    setShowTooltip(true);
  };

  const handleMouseLeave = () => {
    if (!showTooltip) {
      setShowTooltip(false);
    }
  };

  // 处理点击外部区域的逻辑
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (
        tooltipRef.current &&
        !tooltipRef.current.contains(event.target as Node) &&
        buttonRef.current &&
        !buttonRef.current.contains(event.target as Node)
      ) {
        setShowTooltip(false);
      }
    };

    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  return (
    <div className="button-container">
      <button
        ref={buttonRef}
        className="button"
        onClick={handleClick}
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
      >
        <AppstoreOutlined />
      </button>
      {showTooltip && (
        <div
          ref={tooltipRef}
          className="tooltip"
          onMouseEnter={handleMouseEnter}
          onMouseLeave={handleMouseLeave}
        >
          <ul className="feature">
            <li onClick={()=>navigate('/xiazai')}>
              <p>下载APP/客户端</p>
              <span>随身设计神器，一键分享发布</span>
            </li>
            <li onClick={()=>navigate('/xianzuo')}>
              <p>团队协作</p>
              <span>多人在线协作，品牌资产规范</span>
            </li>
            <li onClick={()=>navigate('/huiyuan')}>
              <p>会员订购</p>
              <span>会员介绍、购买、升级</span>
            </li>
          </ul>
          <div className="con">
            <dl onClick={()=>navigate('/qudao')}>
              <dt>
                <img
                  src={qudao} // 替换为你的图片URL
                  alt="渠道代理招募"
                  onError={(e) => {
                    e.currentTarget.src = defaultImage;
                  }}
                />
              </dt>
              <dd>
                <p>渠道代理招募</p>
                <span>释放亿级丰富合作红利</span>
              </dd>
            </dl>
            <dl onClick={()=>navigate('/huaban')}>
              <dt>
                <img
                  src={huaban} // 替换为你的图片URL
                  alt="花瓣"
                  onError={(e) => {
                    e.currentTarget.src = defaultImage;
                  }}
                />
              </dt>
              <dd>
                <p>花瓣</p>
                <span>创意灵感天堂，发现设计之美</span>
              </dd>
            </dl>
            <dl onClick={()=>navigate('/kaifang')}>
              <dt>
                <img
                  src={kaifang} // 替换为你的图片URL
                  alt="开放平台"
                  onError={(e) => {
                    e.currentTarget.src = defaultImage;
                  }}
                />
              </dt>
              <dd>
                <p>开放平台</p>
                <span>赋能平台内容轻松创作</span>
              </dd>
            </dl>
            <dl onClick={()=>navigate('/nainiu')}>
              <dt>
                <img
                  src={nainiu} // 替换为你的图片URL
                  alt="奶牛快传"
                  onError={(e) => {
                    e.currentTarget.src = defaultImage;
                  }}
                />
              </dt>
              <dd>
                <p>奶牛快传</p>
                <span>免费平台内容轻松创作</span>
              </dd>
            </dl>
            <dl onClick={()=>navigate('/dingzhi')}>
              <dt>
                <img
                  src={dizhi} // 替换为你的图片URL
                  alt="定制设计"
                  onError={(e) => {
                    e.currentTarget.src = defaultImage;
                  }}
                />
              </dt>
              <dd>
                <p>定制设计</p>
                <span>满足您的所有营销设计需求</span>
              </dd>
            </dl>
            <dl onClick={()=>navigate('/zhaomu')}>
              <dt>
                <img
                  src={zhaomu} // 替换为你的图片URL
                  alt="招募设计师"
                  onError={(e) => {
                    e.currentTarget.src = defaultImage;
                  }}
                />
              </dt>
              <dd>
                <p>招募设计师</p>
                <span>足不出户也能月入过万</span>
              </dd>
            </dl>
          </div>
        </div>
      )}
    </div>
  );
};

export default ButtonWithTooltip;